<!-- 筛选 -->
<template>
	<view class="pages" :style="{'top':`${tabbarHeight}px`,'height': `calc(100vh - ${tabbarHeight}px)`}">
		<!-- 内容区域 -->
		<scroll-view scroll-y="true" class="content" show-scrollbar="false">
			<!-- 职位要求 -->
			<view class="position">
				<view class="title">
					{{list[0].name}}
				</view>
				<view class="list flex flex-wrap">
					<view class="item flex justify-center align-center" v-for="item in list[0].child" :key="item.id" 
					:class="item.id == activeId0?'active':''" @click="click0(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 学历要求 -->
			<view class="position">
				<view class="title">
					{{list[1].name}}
				</view>
				<view class="list flex flex-wrap">
					<view class="item flex justify-center align-center" v-for="item in list[1].child" :key="item.id" 
					:class="item.id == activeId1?'active':''" @click="click1(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 薪资待遇 -->
			<view class="position">
				<view class="title">
					<text>{{list[2].name}}</text>
				</view>
				<view class="list flex flex-wrap">
					<view class="item flex justify-center align-center" v-for="item in list[2].child" :key="item.id" 
					:class="item.id == activeId2?'active':''" @click="click2(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 公司规模 -->
			<view class="position">
				<view class="title">
					{{list[3].name}}
				</view>
				<view class="list flex flex-wrap">
					<view class="item flex justify-center align-center" v-for="item in list[3].child" :key="item.id" 
					:class="item.id == activeId3?'active':''" @click="click3(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 经验要求 -->
			<view class="position">
				<view class="title">
					{{list[4].name}}
				</view>
				<view class="list flex flex-wrap">
					<view class="item flex justify-center align-center" v-for="item in list[4].child" :key="item.id" 
					:class="item.id == activeId4?'active':''" @click="click4(item)">
						{{item.name}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="btn">
			<view class="button0 flex justify-center align-center" @click="clear">重选</view>
			<view class="button1 flex justify-center align-center" @click="submit">确定</view>
		</view>
		
	</view>
</template>

<script>
	import { list } from '@/data/screening.js'
	export default {
		props:{
			listQurey:Object
		},
		data() {
			return {
				list,
				tabbarTop: 0,
				tabbarHeight: 0,
				background: {
					background: 'linear-gradient(135deg, #1C79F8, #0265EB)' //顶部导航背景色
				},
				activeId0: 0,
				activeId1: 0,
				activeId2: 0,
				activeId3: 0,
				activeId4: 0,
				emit:{
					jobId: 0,
					positionEducation:0,
					positionSalaryRange:0,
					companyRange:0,
					positionExperience:0,
					shaw: true
				}
			}
		},
		beforeMount() {
			this.emit.jobId = this.listQurey.jobId
			this.activeId0 = this.listQurey.jobId
			this.emit.positionExperience = this.listQurey.positionExperience
			this.activeId1 = this.listQurey.positionEducation
			this.emit.positionEducation = this.listQurey.positionEducation
			this.activeId2 = this.listQurey.positionSalaryRange
			this.emit.companyRange = this.listQurey.companyRange
			this.activeId3 = this.listQurey.companyRange
			this.emit.positionSalaryRange = this.listQurey.positionSalaryRange
			this.activeId4 = this.listQurey.positionExperience
			this.init()
		},
		methods: {
			//初始化
			init(){
				this._setTabbarTitleHeight()
			},
			//设置title高度
			_setTabbarTitleHeight() {
				let top = uni.getStorageSync('tabbarCapsule')
				this.tabbarTop = top.top
				this.tabbarHeight = top.bottom + 10
			},
			//点击职位要求选项
			click0(e){
				// 多选
				// let job = [] 
				// console.log(job)
				// if(e.id != 0){
				// 	this.list[0].child[0].check = false
				// 	this.list[0].child[e.id].check = !this.list[0].child[e.id].check
				// 	this.list[0].child.forEach((item,i) => {
				// 		if(item.check == true){
				// 			job.push(i)
							
				// 			this.emit.jobId = job
				// 		}
				// 	})
				// }else if(e.id == 0){
				// 	this.list[0].child[0].check = true
				// 	this.emit.jobId = []
				// 	this.list[0].child.forEach(item => {
				// 		if(item.id != 0){
				// 			item.check = false
				// 		}
				// 	})
				// }
				// console.log(this.emit.jobId)
				this.emit.jobId = e.id
				this.list[0].child[e.id].check = !this.list[0].child[e.id].check
				this.activeId0 = e.id

			},
			//点击学历要求选项
			click1(e){
				// 多选
				// let job = []
				// if(e.id != 0){
				// 	this.list[1].child[0].check = false
				// 	this.list[1].child[e.id].check = !this.list[1].child[e.id].check
				// 	this.list[1].child.forEach((item,i) => {
				// 		if(item.check == true){
				// 			job.push(i)
				// 			this.emit.positionEducation = job
				// 		}
				// 	})
				// }else if(e.id == 0){
				// 	this.list[1].child[0].check = true
				// 	this.emit.positionEducation = []
				// 	this.list[1].child.forEach(item => {
				// 		if(item.id != 0){
				// 			item.check = false
				// 		}
				// 	})
				// }
				this.emit.positionEducation = e.id
				this.list[1].child[e.id].check = !this.list[1].child[e.id].check
				this.activeId1 = e.id
			},
			//点击薪资待遇选项
			click2(e){
				this.emit.positionSalaryRange = e.id
				this.list[2].child[e.id].check = !this.list[2].child[e.id].check
				this.activeId2 = e.id
			},
			//点击公司规模选项
			click3(e){
				// 多选
				// let job = []
				// if(e.id != 0){
				// 	this.list[3].child[0].check = false
				// 	this.list[3].child[e.id].check = !this.list[3].child[e.id].check
				// 	this.list[3].child.forEach((item,i) => {
				// 		if(item.check == true){
				// 			job.push(i)
				// 			this.emit.companyRange = job
				// 		}
				// 	})
				// }else if(e.id == 0){
				// 	this.list[3].child[0].check = true
				// 	this.emit.companyRange = []
				// 	this.list[3].child.forEach(item => {
				// 		if(item.id != 0){
				// 			item.check = false
				// 		}
				// 	})
				// }
				this.emit.companyRange = e.id
				this.list[3].child[e.id].check = !this.list[3].child[e.id].check
				this.activeId3 = e.id
			},
			//点击经验要求选项
			click4(e){
				// 多选
				// let job = []
				// if(e.id != 0){
				// 	this.list[4].child[0].check = false
				// 	this.list[4].child[e.id].check = !this.list[4].child[e.id].check
				// 	this.list[4].child.forEach((item,i) => {
				// 		if(item.check == true){
				// 			job.push(i)
				// 			this.emit.positionExperience = job
				// 		}
				// 	})
				// }else if(e.id == 0){
				// 	this.list[4].child[0].check = true
				// 	this.emit.positionExperience = []
				// 	this.list[4].child.forEach(item => {
				// 		if(item.id != 0){
				// 			item.check = false
				// 		}
				// 	})
				// }
				this.emit.positionExperience = e.id
				this.list[4].child[e.id].check = !this.list[4].child[e.id].check
				this.activeId4 = e.id
			},
			//提交筛选条件并返回
			submit(){
				this.emit.shaw = false
				this.$emit('select',this.emit)
			},
			clear(){
				this.activeId0 = 0
				this.activeId1 = 0
				this.activeId2 = 0
				this.activeId3 = 0
				this.activeId4 = 0
				this.emit.jobId = 0
				this.emit.positionExperience = 0
				this.emit.positionEducation = 0
				this.emit.positionSalaryRange = 0
				this.emit.companyRange = 0
			}
		}
	}
</script>

<style lang="scss">
.pages{
	padding: 50rpx 30rpx calc(100rpx + env(safe-area-inset-bottom));
	position: absolute;
	background-color: #ffffff;
	z-index: 99;
	.btn{
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 20rpx 30rpx 0;
		display: flex;
		width: 100%;
		justify-content: space-between;
		.button0{
			width: 300rpx;
			height: 75rpx;
			background: #999999;
			border-radius: 38rpx;
			line-height: 1;
			font-weight: 500;
			color: #FFFFFF;
			font-size: 32rpx;
			box-shadow: 0rpx 10rpx 10rpx rgba(153, 153, 153, 0.4);
		}
		.button1{
			width: 300rpx;
			height: 75rpx;
			background: #0265EB;
			border-radius: 38rpx;
			line-height: 1;
			font-weight: 500;
			color: #FFFFFF;
			font-size: 32rpx;
			box-shadow: 0rpx 10rpx 10rpx rgba(12,108,240, .4);
		}
	}
	.tabbar {
		background: linear-gradient(135deg, #1C79F8, #0265EB); //顶部导航背景色
		position: relative;
		.close {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			bottom: 30rpx;
			left: 30rpx;
		}
		.tabbar-title {
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: 600;
		}
	}
	.content{
		height: 100%;
		.position{
			margin-bottom: 40rpx;
			.title{
				font-weight: 800;
				color: #333333;
				font-size: 36rpx;
				.os{
					color: #666666;
					font-size: 24rpx;
					margin-left: 20rpx;
				}
			}
			.list{
				.item{
					margin-top: 20rpx;
					width: 214rpx;
					height: 60rpx;
					border-radius: 30px;
					border: 1rpx solid #999999;
					color: #999999;
					background-color: #FFFFFF;
					&:nth-child(3n-1){
						margin: 20rpx 24rpx 0;
					}
				}
				.active{
					color: #FFFFFF;
					background-color: #0265EB;
					border: none;
				}
			}
		}
	}
}
</style>
